<template>
  <div class="goods-approve-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="查看商品" name="view" />
      </el-tabs>
    </div>

    <!-- 商品基本信息 -->
    <div class="section-container">
      <div class="section-title">商品信息</div>
      <div class="info-form">
        <div class="form-item">
          <div class="form-label">
            <span class="required">*</span>
            产品名：
          </div>
          <div v-if="action === 'view'" class="form-content">
            {{ goodsInfo.product_name }}
          </div>
          <el-input
            v-else
            v-model="goodsInfo.product_name"
            :class="{ 'is-error': errors.product_name }"
          />
        </div>
        <div class="form-item">
          <div class="form-label">
            <span class="required">*</span>
            商品名：
          </div>
          <div v-if="action === 'view'" class="form-content">
            {{ goodsInfo.goods_name }}
          </div>
          <el-input
            v-else
            v-model="goodsInfo.goods_name"
            :class="{ 'is-error': errors.goods_name }"
          />
        </div>
        <div class="form-item">
          <div class="form-label">
            <span class="required">*</span>
            商品品牌：
          </div>
          <div v-if="action === 'view'" class="form-content">
            {{ goodsInfo.brand_name }}
          </div>
          <el-select
            v-else
            v-model="goodsInfo.brand_id"
            :class="{ 'is-error': errors.brand_id }"
            filterable
          >
            <el-option
              v-for="item in searchListOptions.brandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="form-item">
          <div class="form-label">
            <span class="required">*</span>
            商品分类：
          </div>
          <div v-if="action === 'view'" class="form-content">
            {{ goodsInfo.category_name }}
          </div>
          <el-select
            v-else
            v-model="goodsInfo.category_id"
            :class="{ 'is-error': errors.category_id }"
            filterable
          >
            <el-option
              v-for="item in searchListOptions.cateList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="form-item">
          <div class="form-label">
            <span class="required">*</span>
            商品单位：
          </div>
          <div v-if="action === 'view'" class="form-content">
            {{ goodsInfo.unit }}
          </div>
          <el-select
            v-else
            v-model="goodsInfo.unit"
            :class="{ 'is-error': errors.brand_id }"
            filterable
            allow-create
            default-first-option
          >
            <el-option
              v-for="item in searchListOptions.unitList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
      </div>
    </div>

    <!-- 商品规格价格 -->
    <div class="section-container">
      <div class="section-title">商品规格</div>
      <div class="spec-container">
        <div class="spec-form">
          <div class="spec-form-item">
            <div class="form-label">商品规格：</div>
            <div class="spec-options">
              <div
                class="spec-option"
                v-for="(spec, index) in skuOptionList"
                :key="index"
              >
                <el-select
                  v-model="spec.id"
                  placeholder="请选择规格"
                  @change="handleChangeSpecName(spec.id, index)"
                  :disabled="action === 'view'"
                  filterable
                >
                  <el-option
                    v-for="item in specOptions"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                    :disabled="isDisabled(item.id)"
                  />
                </el-select>
                <div class="spec-values">
                  <el-tag
                    v-for="(value, vIndex) in spec.values"
                    :key="vIndex"
                    :class="[value.selected ? 'selected' : 'info']"
                    @click="
                      action === 'view' ? () => {} : createSku(spec, value)
                    "
                  >
                    <span>
                      {{ value.name }}
                    </span>
                  </el-tag>
                </div>
                <div v-if="action !== 'view'">
                  <el-button
                    v-if="skuOptionList.length <= 1"
                    type="primary"
                    plain
                    @click="handleAddSpecValue(index)"
                  >
                    添加
                  </el-button>
                  <el-button
                    v-if="skuOptionList.length > 1"
                    type="danger"
                    plain
                    @click="handleRemoveSpecValue(index)"
                  >
                    删除
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 商品价格表 -->
        <div class="price-table">
          <el-table
            :data="skuList"
            border
            style="width: 100%"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              v-for="(spec, itemIndex) in skuOptionList"
              :key="itemIndex"
            >
              <template #header>
                {{ spec.name }}
              </template>
              <template #default="scope">
                {{ scope.row[`${spec.name}`] }}
              </template>
            </el-table-column>
            <el-table-column label="厂价" prop="price" align="center">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.price"
                  :min="0"
                  :controls="false"
                  :disabled="action === 'view'"
                  @wheel.native.prevent="stopScroll($event)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 设置折扣 -->
        <div class="discount-setting">
          <div class="form-label">设置规格组：</div>
          <div class="discount_box">
            <template v-for="(item, index) in SkuDiscount" :key="index">
              <div class="discount-item">
                <div class="discount-row">
                  <el-input
                    v-model="item.discount"
                    placeholder="请输入规格组名称"
                    style="width: 200px"
                    :disabled="action === 'view'"
                  />
                  <div class="discount-buttons" v-if="action !== 'view'">
                    <el-button type="primary" plain @click="handleAddDiscount">
                      添加
                    </el-button>
                    <el-button
                      v-if="SkuDiscount.length > 1"
                      type="danger"
                      plain
                      @click="handleRemoveDiscount(index)"
                    >
                      删除
                    </el-button>
                    <el-button
                      type="info"
                      plain
                      @click="selectOtherDiscount(index)"
                    >
                      选择剩余规格
                    </el-button>
                  </div>
                </div>
                <div class="discount-row" style="margin-top: 10px">
                  <el-select
                    v-model="item.goods_spec_value_ids"
                    style="width: 100%"
                    :disabled="action === 'view'"
                    multiple
                    placeholder="请选择规格组合"
                    clearable
                  >
                    <el-option
                      v-for="sku in skuList"
                      :key="sku.value"
                      :label="get_sku_name(sku)"
                      :value="sku.spec_value"
                    />
                  </el-select>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品相册 -->
    <div class="section-container">
      <div class="section-title">商品相册</div>
      <div class="gallery-container">
        <div class="cover-image">
          <div class="form-label">
            <span class="required">*</span>
            封面图片：
          </div>
          <div class="image-preview" v-if="action === 'view'">
            <el-image :src="goodsInfo.goods_image" fit="cover" />
          </div>
          <el-upload
            v-else
            ref="uploadRef"
            v-model:file-list="imageList"
            :action="uploadParams['host']"
            :before-upload="beforeUpload"
            :limit="1"
            :on-exceed="handleExceed"
            :data="uploadParams['param']"
            :on-success="handleSuccessBus"
            :on-error="handleError"
            :on-preview="handlePreview('goods_image')"
            :on-remove="handleRemoveBus"
            list-type="picture-card"
          >
            <el-icon>
              <Plus />
            </el-icon>
            <template #tip>
              <div class="el-upload__tip">
                上传文件大小在20M内，支持.pdf/.jpg/.png/.webp格式
              </div>
            </template>
          </el-upload>
        </div>
      </div>
      <div class="section-title">业务员返点</div>
      <div class="gallery-container">
        <div class="cover-image" style="align-items: center">
          <div class="form-label">
            <span class="required">*</span>
            返点比例：
          </div>
          <div v-if="action === 'view'">{{ goodsInfo.return_point_ratio }}</div>
          <el-input-number
            v-else
            v-model="goodsInfo.return_point_ratio"
            :min="0"
            placeholder="示例80%"
            :controls="false"
            style="width: 200px"
            :disabled="action === 'view'"
          />
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footer-buttons">
      <el-button
        v-repeat
        v-if="action === 'add' || action === 'edit'"
        type="primary"
        @click="handleSubmitAudit"
      >
        {{ action === 'add' ? '新增' : '修改' }}
      </el-button>

      <el-button @click="handleReturn">取消</el-button>
    </div>

    <!-- 添加图片预览组件 -->
    <el-image-viewer
      v-if="showViewer"
      :url-list="[previewUrl]"
      :hide-on-click-modal="true"
      @close="showViewer = false"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { ElMessage, ElMessageBox, genFileId } from 'element-plus'
  import { stopScroll } from '@/utils/helper'
  import { getOSSParam } from '@/api/common'
  import { message } from '@/utils/helper'
  import {
    getBrandList,
    getcateList,
    getgoodsArrtList,
    addGoodsMenent,
    getgoodsInfo,
    editGoodsMenent,
    getAdminArrtList,
    getReturnPointRatio,
  } from '@/api/goods'
  import _ from 'lodash'
  import { unitList as unitListData } from '@/utils/const'
  const router: any = useRouter()
  const route = useRoute()

  // 标签页
  const activeTab = ref('view')
  const action = ref(route.query.action || 'view')

  // 商品信息数据
  const goodsInfo: any = reactive({
    id: undefined,
    category_id: undefined,
    brand_id: undefined,
    brand_name: '',
    unit: '',
    category_name: '',
    product_name: '',
    goods_name: '',
    goods_sku: [],
    goods_sku_data: [],
    set_discount: [],
    goods_image: '',
    return_point_ratio: undefined,
  })

  // 添加校验规则
  const rules = {
    product_name: { required: true, message: '请输入产品名' },
    goods_name: { required: true, message: '请输入商品名' },
    brand_id: { required: true, message: '请选择品牌' },
    category_id: { required: true, message: '请选择分类' },
    return_point_ratio: {
      required: true,
      message: '请输入返点比例,填0则不产生结算单',
    },
    goods_sku: { required: true, message: '请选择规格' },
    set_discount: { required: true, message: '请设置折扣' },
    goods_image: { required: true, message: '请上传封面图片' },
    unit: { required: true, message: '请输入商品单位' },
  }

  // 错误状态
  const errors = reactive({
    product_name: false,
    goods_name: false,
    brand_id: false,
    category_id: false,
    return_point_ratio: false,
    goods_sku: false,
    set_discount: false,
    goods_image: false,
    unit: false,
  })

  // 规格选项
  const specOptions = ref([])

  const skuOptionList = ref([
    {
      id: undefined,
      name: '',
      values: [],
    },
  ])
  // 生成SKU列表
  const skuList = ref([])

  const createSku = (spec: any, value: any) => {
    //点击勾选的事项 实时生成sku列表
    value.selected = !value.selected
    regenerateSkuList()
  }
  const regenerateSkuList = () => {
    const result = generateCartesianProduct(skuOptionList.value)
    skuList.value = result
    // 重新生成sku列表
    console.log(skuList.value)
    SkuDiscount.value.forEach((item) => {
      item.goods_spec_value_ids = []
    })
    // 如果是编辑的 查一下sku_id符合原来的要塞入之前的价格
    if (action.value === 'edit') {
      skuList.value.forEach((ic) => {
        const index = goodsInfo.goods_sku_data.find(
          (sku) => sku.goods_spec_value_ids === ic.spec_value
        )
        if (index) {
          ic.price = index.factory_price || 0
          ic.goods_sku_id = index.goods_sku_id || 0
        }
      })
    }
  }

  const generateCartesianProduct = (skuOptionList) => {
    // 获取所有规格的名称和它们的值
    const specNames = skuOptionList.map((spec) => spec.name)
    const specValues = skuOptionList.map((spec) =>
      spec.values
        .filter((value) => value.selected)
        .map((value) => ({
          name: value.name,
          value: value.value || value.id, // 获取value或id值
        }))
    )

    // 生成笛卡尔积
    const cartesianProduct = (arrays) => {
      return arrays.reduce(
        (acc, curr) =>
          acc.flatMap((a) => {
            return curr.map((b) => [...a, b])
          }),
        [[]]
      )
    }

    const productCombinations = cartesianProduct(specValues)
    // 格式化结果为你需要的形式
    return productCombinations.map((combination) => {
      const valueIds = combination.map((item) => item.value).join(',') // 将value值用逗号拼接
      return combination.reduce(
        (acc, item, index) => {
          acc[specNames[index]] = item.name
          return acc
        },
        { price: 0, spec_value: valueIds } // 添加spec_value字段存储拼接的value值
      )
    })
  }

  // 折扣设置
  const SkuDiscount = ref([
    {
      discount: '',
      goods_spec_value_ids: [],
      goods_spec_value_names: undefined,
      goods_discount_id: 0,
    },
  ])
  const handleAddSpecValue = () => {
    skuOptionList.value.push({
      id: undefined,
      name: '',
      values: [],
    })
    regenerateSkuList()
  }

  const handleRemoveSpecValue = (specIndex: number) => {
    ElMessageBox.confirm('删除规格值会影响商品SKU，确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      skuOptionList.value.splice(specIndex, 1)
      regenerateSkuList()
    })
  }

  const handleAddDiscount = () => {
    SkuDiscount.value.push({
      discount: '',
      goods_spec_value_ids: [],
    } as any)
  }
  const handleRemoveDiscount = (discountIndex: number) => {
    SkuDiscount.value.splice(discountIndex, 1)
  }
  const selectOtherDiscount = (index: number) => {
    console.log(skuList.value, skuOptionList.value, SkuDiscount.value)
    // 拿出来所有的规格值，然后去掉已选择的规格值，将未选择的规格值塞入
    const allSelectSkuDiscount_values = [
      ...new Set(
        SkuDiscount.value.map((ids) => ids.goods_spec_value_ids).flat()
      ),
    ]
    const other = skuList.value
      .filter((ic) => !allSelectSkuDiscount_values.includes(ic.spec_value))
      .map((ic) => ic.spec_value)
    if (other.length == 0) return message('已经全部选中了', 'warning')
    SkuDiscount.value[index].goods_spec_value_ids = [
      ...SkuDiscount.value[index].goods_spec_value_ids,
      ...other,
    ]
  }
  const CheckRulesEmpty = () => {
    let isValid = true
    let firstErrorField = ''

    // 重置所有错误状态
    Object.keys(errors).forEach((key) => {
      errors[key] = false
    })

    // 检查每个必填字段
    Object.keys(rules).forEach((key) => {
      if (checkNum(goodsInfo[key])) {
        errors[key] = true
        isValid = false
        if (!firstErrorField) {
          firstErrorField = rules[key].message
        }
      }
    })

    if (!isValid) {
      ElMessage.error(firstErrorField)
    }

    return isValid
  }

  const checkNum = (item) => item === '' || item === undefined || item === null
  const checkRulesGoodsandSku = () => {
    // if (goodsInfo.goods_sku.some((item) => checkNum(item.factory_price))) {
    //   message('存在未填写价格的商品,请补充！', 'error')
    //   return false
    // }
    if (
      goodsInfo.set_discount.some(
        (item) =>
          checkNum(item.discount) ||
          checkNum(item.goods_spec_value_ids) ||
          item.goods_spec_value_ids.length === 0
      )
    ) {
      goodsInfo.set_discount = goodsInfo.set_discount.filter((item) => {
        return !(
          checkNum(item.discount) ||
          checkNum(item.goods_spec_value_ids) ||
          item.goods_spec_value_ids.length === 0
        )
      })
    }
    return true
  }

  //处理spe数据转化成接口需要的格式
  const changeSpeOption = () => {
    if (
      skuList.value.length === 0 ||
      skuOptionList.value.filter((o) => o.id).length === 0
    )
      return message('请选择规格值', 'error')
    goodsInfo.goods_sku = skuList.value.map((item) => {
      return {
        goods_sku_id: item.goods_sku_id || 0,
        goods_spec_ids: skuOptionList.value.map((o) => o.id).join(','),
        goods_spec_value_ids: item.spec_value,
        factory_price: item.price,
      }
    })

    goodsInfo.set_discount = SkuDiscount.value.map((item: globalItem) => {
      return {
        goods_discount_id: item.goods_discount_id || 0,
        discount: item.discount,
        goods_spec_value_ids: item.goods_spec_value_ids,
      }
    })
  }

  const handleSubmitAudit = async () => {
    await changeSpeOption()
    if (CheckRulesEmpty()) {
      if (!checkRulesGoodsandSku()) return
      // 这里添加提交逻辑
      const res: any =
        action.value === 'add'
          ? await addGoodsMenent({
              ...goodsInfo,
              goods_sku: JSON.stringify(goodsInfo.goods_sku),
              set_discount:
                goodsInfo.set_discount.length === 0
                  ? 0
                  : JSON.stringify(goodsInfo.set_discount),
            })
          : await editGoodsMenent({
              ...goodsInfo,
              goods_sku: JSON.stringify(goodsInfo.goods_sku),
              set_discount:
                goodsInfo.set_discount.length === 0
                  ? 0
                  : JSON.stringify(goodsInfo.set_discount),
            })
      if (res.code === 200) {
        message('操作成功')
        handleReturn()
      } else {
        message(res.msg, 'error')
      }
    }
  }

  // 取消操作
  const handleReturn = () => {
    Object.assign(goodsInfo, {
      id: undefined,
      category_id: undefined,
      brand_id: undefined,
      brand: '',
      category: '',
      product_name: '',
      goods_name: '',
      goods_sku: [],
      set_discount: [],
      goods_image: '',
      return_point_ratio: undefined,
      unit: '',
    })
    specOptions.value = []
    skuOptionList.value = []
    skuList.value = []
    imageList.value = []
    router.push({ path: '/goods/goodsList', query: { repalce: true } })
  }

  const handleChangeSpecName = (spec, index: any) => {
    // 根据spec.id找到对应的specOptions
    const specOption = _.cloneDeep(specOptions.value).find(
      (item) => item.id === spec
    )
    skuOptionList.value[index].name = specOption.name
    skuOptionList.value[index].id = specOption.id
    skuOptionList.value[index].values = specOption.values
    regenerateSkuList()
  }

  //根据生成的sku组合列拼接下发组合项
  const get_sku_name = (sku) => {
    const obj = _.cloneDeep(sku)
    delete obj.price
    delete obj.spec_value
    delete obj.goods_sku_id
    return Object.values(obj).join('-')
  }

  const isDisabled = computed(() => {
    return (specId: any) => {
      if (!specId) return false
      const spec = skuOptionList.value.find((item) => item.id === specId)
      return !!spec
    }
  })

  const uploadParams: globalItem = ref({
    host: '',
    param: {},
    dir: '',
  })

  const uploadRef = ref(null)
  const image_list = ref(['image/png', 'image/jpeg', 'image/webp'])
  const uploadLoading = ref(false)
  const beforeUpload = (rawFile) => {
    if (image_list.value.includes(rawFile.type)) {
      if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error('上传的图片不得大于10M!')
        return false
      }
      const image_type = rawFile.type.split('/')[1]
      uploadParams.value.param.key = `${uploadParams.value.dir}/${rawFile.uid}.${image_type}`
      uploadLoading.value = true
      return true
    } else {
      ElMessage.error('上传的图片不是图片(jpg,png,webp)类型')
      return false
    }
  }
  const handleExceed = (files) => {
    uploadRef.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    uploadRef.value.handleStart(file)
    uploadRef.value.submit()
  }
  const handleSuccessBus = async () => {
    goodsInfo.goods_image = `${uploadParams.value.host}/${uploadParams.value.param.key}`
    uploadLoading.value = false
  }

  const handleRemoveBus: any = () => {
    goodsInfo.goods_image = ''
  }

  const handleError = (err) => {
    ElMessage.error('上传失败, 请尝试重新上传')
    getOSSParams()
    uploadLoading.value = false
  }

  const getOSSParams = async () => {
    const { data } = await getOSSParam()
    uploadParams.value = data
  }
  // 预览相关变量
  const showViewer = ref(false)
  const previewUrl = ref('')

  // 修改预览处理函数
  const handlePreview = (key: string) => (file: any) => {
    // 如果是刚上传的文件，使用 URL.createObjectURL 创建预览地址
    if (file.url) {
      previewUrl.value = file.url
    } else {
      // 如果是已有的图片，直接使用 storeInfo 中的地址
      previewUrl.value = goodsInfo[key]
    }
    showViewer.value = true
  }
  const searchListOptions = ref({
    cateList: [],
    brandList: [],
    unitList: unitListData,
  })
  const getCateListOption = async () => {
    const { data } = await getcateList()
    searchListOptions.value.cateList = data.data
  }

  const getBrandListOption = async () => {
    const { data } = await getBrandList()
    searchListOptions.value.brandList = data.data
  }
  //获取所有的规格信息
  const getSpecList = async () => {
    let data: any = []
    if (route.query.id && route.query.is_admin) {
      data = await getAdminArrtList({
        goods_id: route.query.id,
      })
    } else {
      const { data: newData } = await getgoodsArrtList({
        limit: 999,
      })
      data = newData
    }
    if (data.data.length === 0) return
    specOptions.value = data.data
      .filter((i) => i.status === 1)
      .map((spe: any) => ({
        id: spe.id,
        name: spe.goods_spec_name,
        values: spe.specAttr.map((item) => ({
          goods_spec_id: item.goods_spec_id,
          id: item.id,
          name: item.goods_spec_value_name,
          selected: false,
        })),
      }))
  }

  const getGoodsInfoData = async (id) => {
    const { data } = await getgoodsInfo({ id })
    Object.keys(goodsInfo).forEach((key) => {
      goodsInfo[key] = data[key]
    })
    if (goodsInfo.goods_sku_data.length === 0) return
    const arr = goodsInfo.goods_sku_data[0].goods_spec_ids
      .split(',')
      .map((i) => Number(i))
    skuOptionList.value = arr.map((id) =>
      _.cloneDeep(specOptions.value).find((o) => id === o.id)
    )
    //获取勾选的数据规格值 属性
    goodsInfo.goods_sku_data.forEach((item) => {
      item.goods_spec_ids.split(',').forEach((spec_value) => {
        const spec = skuOptionList.value.find((o) => o.id == spec_value)
        if (spec) {
          // 勾选对应的数据列
          item.goods_spec_value_ids.split(',').forEach((value_id) => {
            console.log(
              value_id,
              spec.values.find((o) => o.id == value_id)
            )
            const value = spec.values.find((o) => o.id == value_id)
            if (value) {
              value.selected = true
            }
          })
        }
      })
    })

    await regenerateSkuList()

    // 回显sku_id 和价格
    skuList.value.forEach((sku) => {
      const sku_data = goodsInfo.goods_sku_data.find(
        (skuData) => skuData.goods_spec_value_ids === sku.spec_value
      )
      if (sku_data) {
        sku.goods_sku_id = sku_data.goods_sku_id
        sku.price = Number(sku_data.factory_price)
      }
    })
    if (goodsInfo.set_discount.length !== 0) {
      //回显折扣
      SkuDiscount.value = goodsInfo.set_discount.map((item) => {
        return {
          discount: item.discount,
          goods_spec_value_ids: item.goods_spec_value_ids,
          goods_spec_value_names: item.goods_spec_value_names,
          goods_discount_id: item.goods_discount_id || 0,
        }
      })
    }

    imageList.value = [{ url: goodsInfo.goods_image }]

    // 设置一下返点比例 单独接口
    if (route.query.id && route.query.is_admin) {
      const res = await getReturnPointRatio({
        id: route.query.id,
        brand_id: goodsInfo.brand_id,
      })
      goodsInfo.return_point_ratio = res.data.return_point_ratio
    }
  }

  const imageList = ref([])

  // 初始化数据
  onMounted(async () => {
    getOSSParams()
    // 实际应用中通常从API获取数据
    await getBrandListOption()
    await getCateListOption()
    await getSpecList()
    if (route.query.id) {
      await getGoodsInfoData(route.query.id)
    }
  })
</script>

<style lang="scss" scoped>
  .goods-approve-container {
    padding: 20px;
    background-color: #f6f8fa;

    .page-header {
      position: relative;
      margin-bottom: 20px;

      .approval-status {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #f56c6c;

        &.approved {
          color: #67c23a;
        }
      }
    }

    .section-container {
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      overflow: hidden;

      .section-title {
        padding: 15px 20px;
        font-size: 16px;
        font-weight: bold;
        background-color: #f5f7fa;
        border-bottom: 1px solid #e0e0e0;
      }

      .info-form {
        padding: 20px;

        .form-item {
          display: flex;
          margin-bottom: 15px;

          .form-label {
            width: 120px;
            text-align: right;
            line-height: 32px;
            margin-right: 10px;

            .required {
              color: #f56c6c;
              margin-right: 4px;
            }
          }

          .form-content {
            flex: 1;
            line-height: 32px;
          }
        }
      }

      .spec-container {
        padding: 20px;

        .spec-form {
          margin-bottom: 20px;

          .spec-form-item {
            display: flex;
            margin-bottom: 15px;

            .form-label {
              width: 120px;
              text-align: right;
              line-height: 32px;
              margin-right: 10px;
            }

            .spec-options {
              flex: 1;

              .spec-option {
                display: flex;
                margin-bottom: 10px;

                .el-select {
                  width: 150px;
                  margin-right: 15px;
                }

                .spec-values {
                  flex: 1;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 5px;
                  align-items: center;

                  .el-tag {
                    margin-right: 5px;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }

        .price-table {
          margin-bottom: 20px;
        }

        .discount-setting {
          display: flex;
          align-items: center;
          margin-top: 20px;

          .form-label {
            width: 125px;
            text-align: right;
            margin-right: 10px;
            margin-bottom: 10px;
          }

          .discount-input {
            display: flex;
            align-items: center;
          }
        }
      }

      .gallery-container {
        padding: 20px;

        .cover-image {
          display: flex;

          .form-label {
            width: 120px;
            text-align: right;
            line-height: 32px;
            margin-right: 10px;

            .required {
              color: #f56c6c;
              margin-right: 4px;
            }
          }

          .image-preview {
            width: 200px;
            height: 150px;
            border: 1px dashed #d9d9d9;
            border-radius: 4px;
            overflow: hidden;

            .el-image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .audit-form {
        padding: 20px;

        .audit-options {
          margin-bottom: 20px;
        }

        .audit-remark {
          display: flex;

          .form-label {
            width: 120px;
            text-align: right;
            line-height: 32px;
            margin-right: 10px;
          }

          .el-input {
            width: 500px;
          }
        }
      }
    }

    .footer-buttons {
      text-align: center;
      margin-top: 30px;

      .el-button {
        min-width: 100px;
        margin: 0 10px;
      }
    }
  }

  .info {
    background-color: #f0f2f5;
    color: #333;
  }

  .selected {
    background-color: #409eff;
    color: #fff;
  }

  .price-input {
    ::v-deep .el-input__wrapper {
      text-align: center;
    }
  }

  .discount_box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
    flex: 1;

    .discount-item {
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      background-color: #f8f9fa;

      .discount-row {
        display: flex;
        align-items: center;
        gap: 10px;

        .discount-buttons {
          margin-left: 10px;
          display: flex;
          gap: 10px;
        }
      }
    }
  }

  .discount-setting {
    .form-label {
      font-weight: bold;
      margin-bottom: 10px;
      padding: 0 20px;
    }
  }
</style>
